<template>
  <div class="ordering">
    <div class="heading">员工详情</div>
    <div class="query-view">
      <el-button type="success" @click="add_to">添加员工</el-button>
      <el-button
        type="danger"
        :disabled="deleteval.length > 0 ? false : true"
        @click="all_delete"
        >批量删除</el-button
      >
    </div>
    <!--表格-->
    <div>
      <el-table
        ref="multipleTableRef"
        :data="table_Data"
        style="width: 100%"
        :formatter="formatTime"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column
          prop="time"
          label="创建时间"
          :formatter="formatTime"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="job_number"
          label="工号"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column prop="sex" label="姓别" align="center" min-width="100">
        </el-table-column>
        <el-table-column
          prop="position"
          label="职位"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column align="center" label="是否离职" min-width="100">
          <template #default="scope">
            <!-- 将自定义类名应用到单元格 -->
            <el-switch
              v-model="scope.row.workerstate"
              @change="Switch($event, scope.row.id, scope.$index)"
            ></el-switch>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev,pager,next"
          :total="totalcount"
          :hide-on-single-page="false"
          @current-change="current_change"
          :current-page="page"
        >
        </el-pagination>
      </div>
    </div>
    <Dialog ref="addels" @launch="launch"></Dialog>
  </div>
</template>

<script>
import {reactive, toRefs, ref, getCurrentInstance, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import Dialog from "./child/el_dialog.vue";
export default {
  components: {
    Dialog,
  },
  setup() {
    const {proxy} = getCurrentInstance();
    const opendata = reactive({
      table_Data: [],
      page: 1,
      totalcount: 10,
      deleteval: [],
    });
    const addels = ref();

    //调用子组件显示弹窗
    const add_to = () => {
      addels.value.isshow();
    };
    //分页切换
    function current_change(number) {
      console.log(number);
      opendata.page = number;
      getEmployes();
    }
    //数据选中
    function handleSelectionChange(val) {
      console.log(val);
      opendata.deleteval = val;
    }

    function all_delete() {
      ElMessageBox.confirm(
        `是否确定删除选定的${opendata.deleteval.length}个员工吗`,
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          if (opendata.deleteval.length > 0) {
            for (const item of opendata.deleteval) {
              await deletEmployes(item.id);
            }
            console.log(1);
            opendata.deleteval = [];

            ElMessage({
              type: "success",
              message: "删除成功",
            });
          } else {
            return ElMessage({
              type: "warning",
              message: "未选中需删除的员工信息",
            });
          }
          refelsh();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消操作",
          });
        });
    }
    function refelsh() {
      getEmployes();
    }
    //#region 数据加载
    onMounted(() => {
      getEmployes();
    });
    //获取数据接口
    async function getEmployes() {
      try {
        const obj = {
          name: null,
          page: opendata.page,
        };
        const res = await new proxy.$request(
          proxy.$urls.m().GetemployeeList,
          obj
        ).modePost();

        opendata.table_Data = res.data.UserList;
        opendata.totalcount = res.data.total;
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //删除员工接口
    async function deletEmployes(id) {
      try {
        const obj = {
          id: id,
        };
        const res = await new proxy.$request(
          proxy.$urls.m().Deleteemployes,
          obj
        ).modePost();
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //时间格式
    function formatTime(row, column) {
      // 使用 JavaScript 内置的 Date 对象将字符串日期转换为 Date 对象
      const date = new Date(row[column.property]);
      // 使用 toLocaleString 方法将日期格式化为所需的格式，例如中国的日期格式为 "yyyy-MM-dd HH:mm:ss"
      return date.toLocaleString("zh-CN", {timeZone: "Asia/Shanghai"});
    }

    //开关选择器触发
    async function Switch(val, id, index) {
      try {
        const obj = {
          id: id,
          wokerstate: val,
        };
        console.log(obj);
        const res = await new proxy.$request(
          proxy.$urls.m().UpemployesWorkState,
          obj
        ).modePost();
        if (res.status == 200) {
          new proxy.$tips(res.data.message).mess_age();
        } else {
          opendata.table_Data[index].wokerstate = !val;
        }
        await getEmployes();
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
        opendata.table_Data[index].wokerstate = !val;
      }
    }

    //被子组件调用方法
    function launch() {
      console.log(8);
      opendata.page = 1;
      getEmployes();
    }
    //#endregion

    return {
      ...toRefs(opendata),
      current_change,
      addels,
      add_to,
      formatTime,
      handleSelectionChange,
      all_delete,
      Switch,
      launch,
    };
  },
};
</script>

<style scoped="scoped">
.custom-cell {
  position: static !important;
}

.pagination-container {
  display: flex;
  justify-content: center; /* 将内容水平居中 */
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: rgb(18, 175, 18) !important;
  color: white;
}

::v-deep .el-table__cell {
  /* 添加您需要的样式 */
  position: static !important;
}
</style>
